<template>
  <q-btn class="button-tag" :color="newCollected ? 'primary' : 'blue-1'"
         :text-color="newCollected ? 'white' : 'primary'" :flat="!newCollected" @click="collectInstance">
    <q-icon :name="newCollected ? 'star' : 'star_border'" class="q-mr-xs"/>
    收藏
  </q-btn>
</template>

<script>
  export default {
    name: 'aCollect',
    props: {
      type: {
        type: String,
        required: true
      },
      id: {
        type: Number,
        required: true
      },
      collected: {
        type: Boolean,
        required: false,
        default: false
      }
    },
    data () {
      return {
        newCollected: null
      }
    },
    created () {
      this.newCollected = this.collected
    },
    computed: {},
    watch: {},
    methods: {
      async collectInstance () {
        if (!this.auth) {
          this.$router.push('/login')
          return
        }

        const { status } = await this.postRequest({
          api: '/api/{type}/{id}/collect/',
          id: this.id,
          type: this.type
        })

        if (status === 200) {
          this.newCollected = !this.newCollected
        }
      }
    }
  }
</script>

<style lang="stylus">
</style>
